<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{title}}</title>

    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/css/main.css" />

    {% if list %} {# 有微博列表，以及右侧面板 #}
    <link rel="stylesheet" href="/css/list.css" />
    <link rel="stylesheet" href="/css/right.css" />
    {% endif %}
    {% if isNarrow %}
    {# 窄模式，登录与注册 #}
    <style>
      body {
        width: 400px;
        margin: 100px auto 0;
      }
    </style>
    {% endif %}
    {% if isNav %}
    {# 有导航 字体图标#}
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    {% endif %}

    <!-- jquery 要首先引入-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <!-- 自己封装的 ajax -->
    <script src="/javascripts/my-ajax.js"></script>

    {% if isInputBlog %}
    {# 有发布微博的功能，需要 at.js
    https://github.com/ichord/At.js #}
    <!-- 开源的 @ 功能插件 -->
    <link href="/css/jquery.atwho.css" rel="stylesheet" />
    <script src="/javascripts/jquery.caret.js"></script>
    <script src="/javascripts/jquery.atwho.js"></script>
    {% endif %}
  </head>

  <body>
    {% if isNav %}
    <nav class="navbar navbar-expand-sm navbar-dark bg-primary">
      <a class="navbar-brand" href="/">盛邦微博</a>
      <ul class="navbar-nav mr-auto" style="flex-direction: row;">
        <li class="nav-item">
          <a class="nav-link" href="/">
            <i class="fa fa-home"></i>
            首页
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/profile">
            <i class="fa fa-user"></i>
            我的空间
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/square">
            <i class="fa fa-group"></i>
            广场
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/setting">
            <i class="fa fa-gear"></i>
            设置
          </a>
        </li>
      </ul>
    </nav>
    {% endif %}


    {# 定义了模板片段并标识一个名字，在模板继承中使用 #}

    {% block content %}
    {% endblock %}

    {% if isNav %}
    <footer class="bg-info">
      <p align="center" class="bg-primary">&COPY;2020 POWERED BY GAO</p>
    </footer>
    {% endif %}
    <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.0/js/bootstrap.min.js"></script>
    <script src="/javascripts/query-object.js"></script>

    {% block js %}
    {% endblock %}
  </body>

</html>